<!-- 
    RebeccaH: 10/7/2013:
    This test was originally part of the Regions + Multicolumn suite
    but was deemed not useful in the context of regions, possibly
    better for fragmentation. Stashing it here to be revisited later
    if we want to submit it for that spec 
    
    See:
    https://github.com/w3c/csswg-test/pull/89#commitcomment-4184930
-->
<!DOCTYPE html>
<html>
<head>
    <title>CSS Test: One named flow with monolithic content flowing into one multi-column region</title>
    <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/>
    <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/>
    <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property"/>
    <link rel="help" href="http://www.w3.org/TR/css3-regions/#multi-column-regions"/>
    <link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
    <link rel="match" href="reference/regions-multicol-003-ref.html"/>
    <meta name="assert" content="This test checks that the named flow monolithic
                                 content flows through the multi-column region."/>
    <style type="text/css">
        #named-flow {
            background-color: green;
            width: 100px;
            height: 600px;
            -webkit-flow-into: multicol;
        }
        #multicol-region {
            position: absolute;
            top: 70px;
            left: 20px;
            width: 360px;
            height: 200px;
            -webkit-columns: 3;
            -webkit-column-gap: 30px;
            -webkit-flow-from: multicol;
            overflow: hidden;
        }
        .failure {
            position: absolute;
            top: 70px;
            background-color: red;
            width: 100px;
            height: 200px;
            z-index: -1;
        }
        #block-1 {
            left: 20px;
        }
        #block-2 {
            left: 150px;
        }
        #block-3 {
            left: 280px;
        }
    </style>
</head>
<body>
    <p>The test passes if there are three vertical green rectangles and no red.</p>
    <div id="named-flow"></div>
    <div id="multicol-region"></div>
    <div class="failure" id="block-1"></div>
    <div class="failure" id="block-2"></div>
    <div class="failure" id="block-3"></div>
</body>
</html>
